<template>
    <div>
        <!-- 头部搜索 -->
        <header>
            <input type="text" v-model="input" @keyup.13="search">
            <button @click="search">搜索</button>
        </header>
        <!-- 下拉选择 -->
        <div>
            <select v-model="selectde">
                <option v-if="slects.length===0">没有数据</option>
                <option :value="item" v-for="(item,index) in slects" :key="index">
                    {{item}}
                </option>
            </select>
        </div>
        <!-- 正在运行 -->
        <ul>
            <li>
                正在运行中:共{{running.length}}条
            </li>
            <li @click="change(index,running,over)" v-for="(item,index) in running" :key="index">
                {{index+1}}、{{item}}
            </li>
        </ul>
        <!-- 已经完成 -->
        <ul>
            <li>
                已经完成:共{{over.length}}条
            </li>
            <li @click="change(index,over,running)" v-for="(item,index) in over" :key="index">
                {{index+1}}、{{item}}
            </li>
        </ul>
    </div>
</template>

<script>
//跨域百度请求:http://suggestion.baidu.com/su?wd=
import jsonp from 'jsonp';
const url = 'http://suggestion.baidu.com/su?wd=';
export default {
    name:"Index",
    data(){
        return {
            selectde:"",
            input:"",//输入搜索
            slects:[],//下拉选择
            running:[],//正在进行
            over:[]//已完成的
        }
    },
    methods:{
        search(){
            jsonp(`${url}${this.input}`,{param:'cb'},(err,data)=>{
                if(err){
                    alert("接口出错");
                }else{
                    this.slects=data.s;
                }
            })
        },
        change(index,a,b){
            b.push(a.splice(index,1)[0])
        }
    },
    watch:{
        selectde(val){
            //val不能是空,不可以是没有数据
            if(val && val!=="没有数据"){
                this.running.push(val);
            }
        }
    }
}
</script>

<style lang="scss" scoped>

</style>